<script lang="ts" setup>
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Alymodel from "../../../mysql_interface/model";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { TaskType } from "@/util/type";

const router = useRouter();
const store = useStore(Storekey);
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const props = defineProps<{
  selectedTask: Studycodemodel.Iteamjob;
  taskTypeInfoCfg: Record<
    TaskType,
    { title: string; conditionText: (num: number, degree?: number) => string }
  >;
  courses: Alymodel.IMcourse[];
}>();

const taskType = computed(() => {
  return props.selectedTask.type || TaskType.QUESTION;
});

const tableData = computed(() => {
  const data = props.selectedTask.teamjobrelation
    ?.filter((e) => e.userid === user.value?.ID)
    .map((n) => {
      const e = props.courses.find((z) => z.ID === n.courseid);
      const index =
        props.selectedTask.jobquestion?.find((z) => n.courseid === z.questionid)
          ?.index || 0;
      return {
        ...e,
        state: n.state,
        catebagid: n.catebagid,
        index,
        teamjobid: props.selectedTask.ID,
      };
    })
    .sort((a, b) => a.index - b.index);
  // return data || []
  //
  return props.courses
    .map((target) => {
      let myTaskRelation = props.selectedTask.teamjobrelation?.find(
        (e) => e.userid === user.value?.ID && e.courseid === target.ID
      );
      const jobquestion = props.selectedTask.jobquestion?.find(
        (z) => target.ID === z.courseid
      );
      return {
        ...target,
        state: myTaskRelation ? myTaskRelation.state : false,
        myTaskRelation: !!myTaskRelation,
        catebagid: jobquestion?.catebagid,
        index: jobquestion?.index || 0,
        teamjobid: props.selectedTask.ID,
      };
    })
    .sort((a, b) => a.index - b.index);
});

onMounted(() => {
  console.log("props", props);
  start();
});
async function start() {}

function videoClick(row: any) {
  // 跳转云课堂
  // const { origin, pathname } = window.location;
  // const url = `${origin}/stemhome?id=${user.value?.ID}&teamid=${user.value?.teamid}#/course/${row?.ID}?lession=0&catebag=${row.catebagid}`
  // window.open(url, '_blank')
  const taskCourseIDs = JSON.stringify(tableData.value?.map((e) => e.ID));
  router.push({
    name: "观看课程",
    params: { ID: row.ID },
    query: {
      catebag: row.catebagid,
      ID: row.ID,
      lession: 0,
      taskCourseIDs,
      taskName: props.selectedTask?.name,
    },
  });
}
</script>

<template>
  <div class="taskItem-container-box">
    <div class=""></div>
    <div class="">
      <el-table
        class="cursor-pointer"
        :data="tableData"
        @row-click="videoClick"
        style="width: 100%"
      >
        <template v-slot:empty>
          <el-empty
            image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
          />
        </template>
        <el-table-column
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="catebagid"
          label="课程组ID"
          width=""
        ></el-table-column>
        <el-table-column prop="ID" label="课程ID" width=""></el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width=""
        ></el-table-column>
        <el-table-column prop="address" label="我的进度">
          <template #default="{ row }">
            <el-icon>
              <el-icon>
                <circleCheckFilled
                  color="#67C23A"
                  v-show="row.myTaskRelation && row.state"
                />
                <WarningFilled
                  color="#F56C6C"
                  v-show="row.myTaskRelation && !row.state"
                />
                <WarnTriangleFilled
                  color="#F56C6C"
                  v-show="!row.myTaskRelation"
                />
              </el-icon>
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped></style>
